<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
    <meta name="format-detection" content="telephone=no">
    <title>阅读 - SaintIC</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://img.saintic.com/cdn/images/favicon-32.png" rel="icon" type="image/x-icon" />
    <link href="https://img.saintic.com/cdn/images/favicon-32.png" rel="shortcut icon" type="image/x-icon" />
    <!-- 百度统计插件 -->
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?88f6d909dd0d8f80bb9748f43ade3ac7";
            var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>

<body>
    <div class="loading-mask" id="init_loading">
        <div class="loading-icon"></div>
    </div>
    <div class="container" id="root">
        <div id="fiction_chapter_title"></div>
        <div class="m-artical-action">
            <div class="artical-action-mid" id="action_mid"></div>
        </div>
        <div id="fiction_container" class="m-read-content"></div>
        <div class="top-nav" id="top-nav" style="display:none">
            <div class="top-nav-warp">
                <div class="icon-back"></div>
                <div class="nav-title" id="nav_title">
                    返回书架
                </div>
            </div>
        </div>
        <div class="top-nav-pannel-bk font-container" id="font-container" style="display:none"></div>
        <div class="top-nav-pannel font-container" id="font-container" style="display:none">
            <div class="child-mod">
                <span>字号</span>
                <button id="large-font" class="spe-button">
                    大
                </button>
                <button id="small-font" class="spe-button" style="margin-left:10px;">
                    小
                </button>
            </div>
            <div class="child-mod" id="bk-container">
                <span>背景</span>
            </div>
        </div>
        <div class="m-button-bar" id="bottom_tool_bar" style="display:none;padding-bottom:70px;">
            <ul class="u-tab" id="bottom_tool_bar_ul">
                <li id="prev_button">
                    上一章
                </li>
                <li id="next_button" style="border-right:none">
                    下一章
                </li>
            </ul>
        </div>

        <div class="bottom-nav-bk bottom_nav" style="display:none"></div>

        <div class="bottom-nav bottom_nav" style="display:none">
            <div class="item menu-button" id="menu_button">
                <div class="item-warp">
                    <div class="icon-menu"></div>
                    <div class="icon-text">
                        目录
                    </div>
                </div>
            </div>
            <div class="item" id="font-button">
                <div class="item-warp">
                    <div class="icon-ft"></div>
                    <div class="icon-text">
                        字体
                    </div>
                </div>
            </div>
            <div class="item" id="night-button">
                <div class="item-warp" style="display:none" id="day_icon">
                    <div class="icon-day"></div>
                    <div class="icon-text">
                        白天
                    </div>
                </div>
                <div class="item-warp" id="night_icon">
                    <div class="icon-night"></div>
                    <div class="icon-text">
                        夜间
                    </div>
                </div>
            </div>
        </div>

        <div class="loading" id="loading" style="display:none">
            正在加载中...
        </div>
        <div class="m-tool-bar-mask" id="tool_bar_mask" style="display:none"></div>
        <ul class="menu-container chapter-list" id="menu_container" style="display:none"></ul>
        <div class="menu-mask" id="menu_mask" style="display:none"></div>
        <div class="mask" id="mask" style="display:none"></div>
    </div>
    <script src="js/zepto.min.js"></script>
    <script src="js/md5.min.js"></script>
    <script src="js/utils.js"></script>
    <script>
        (function () {
            "use strict";

            //获得阅读器内容的方法
            function ReaderModel(Fiction_id, Chapter_id, onChange_) {
                //Fiction_id是book_id, Chapter_id是章节id
                if (!Fiction_id) {
                    alert("阅读书籍参数错误，即将跳转到书架。");
                    location.href = '/read/';
                    return;
                }

                var Title = "";

                //从缓存中读取最近一次阅读的章节id
                if (!Chapter_id) {
                    if (Util.StorageGetter(Fiction_id + '_last_chapter')) {
                        Chapter_id = Util.StorageGetter(Fiction_id + '_last_chapter');
                    }
                }

                var Chapters_map = {};

                // 获取小说信息（包含章节列表）
                var getFictionInfoPromise = new Promise(function (resolve, reject) {
                    $.get(API_URL + Util.make_url({ Action: "getBookInfo", get_chapters: true, sort: "asc", book_id: Fiction_id }), function (res) {
                        if (res.code === 0) {
                            var data = res.data;
                            Title = data.name;
                            document.title = Title + " - SaintIC";
                            if (!Chapter_id) {
                                Chapter_id = data.chapters[0]["chapter_id"];
                            }
                            //记录最近一次阅读的章节id
                            Util.StorageSetter(Fiction_id + '_last_chapter', Chapter_id);
                            //$('#nav_title').html('返回书架');
                            //window.ChaptersData = data.chapters;
                            //window.chapter_data = data.chapters;
                            for (var i = 0; i < data.chapters.length; i++) {
                                var _d = {
                                    "chapter_id": data.chapters[i].chapter_id,
                                    "title": data.chapters[i].title,
                                    "prev": data.chapters[i].prev,
                                    "next": data.chapters[i].next
                                };
                                Chapters_map[data.chapters[i].chapter_id] = _d;
                            }
                            //window.Chapters_map = Chapters_map;
                            resolve(Chapters_map);
                        } else {
                            reject(data);
                        }
                    }, 'json');
                });

                //初始化获取书籍所有章节等
                var init = function () {
                    getFictionInfoPromise.then(function (d) {
                        //异步请求小说信息成功后的回调，d是Chapters
                        gotoChapter(Chapter_id);
                    });
                }

                //跳转到新章节
                var gotoChapter = function (_chapter_id) {
                    Chapter_id = _chapter_id;
                    getCurChapterContent();
                };

                //获得当前章节内容
                var getCurChapterContent = function () {
                    console.log(Chapter_id);
                    $.get(API_URL + Util.make_url({ Action: "getChapterDetail", chapter_id: Chapter_id }), function (res) {
                        if (res.code === 0) {
                            $('#init_loading').hide();
                            onChange_ && onChange_(res.data);
                        }
                    }, 'json');
                    return;
                };


                //获得上一章内容
                var prevChapter = function () {
                    Chapter_id = parseInt(Chapter_id);
                    var cid = Chapters_map[Chapter_id].prev;
                    if (cid == 0) {
                        alert('已经阅读到了尽头！');
                        return;
                    }
                    gotoChapter(cid);
                    Util.StorageSetter(Fiction_id + '_last_chapter', Chapter_id);
                };

                //获得下一章内容
                var nextChapter = function () {
                    Chapter_id = parseInt(Chapter_id);
                    var cid = Chapters_map[Chapter_id].next;
                    if (cid == 0) {
                        alert('已经阅读到了尽头！');
                        return;
                    }
                    gotoChapter(cid);
                    Util.StorageSetter(Fiction_id + '_last_chapter', Chapter_id);
                };

                return {
                    init: init,
                    go: gotoChapter,
                    prev: prevChapter,
                    next: nextChapter,
                    getChapter_id: function () {
                        return Chapter_id;
                    }
                };
            }

            //画一下基本的展示框架
            function RenderBaseFrame(container) {

                function parseChapterData(jsonData) {
                    //var jsonObj = JSON.parse(jsonData);
                    //jsonObj是章节内容，
                    var jsonObj = jsonData.data;
                    //章节标题
                    var html = "<h4>" + jsonData.title + "</h4>";
                    //章节内容，分段
                    var p = jsonData.content.replace("\n\n", "\n").split("\n");
                    for (var i = 0; i < p.length; i++) {
                        html += "<p>" + p[i] + "</p>";
                    }
                    return html;
                }

                return function (data) {
                    container.html(parseChapterData(data));
                };
            }

            function main() {
                var RootContainer = $('#fiction_container');

                // 获取fiction_id 和 chapter_id
                var Fiction_id = Util.getUrlQuery("book_id"), Chapter_id = Util.getUrlQuery("chapter_id");

                // 绑定事件
                var ScrollLock = false;
                var Doc = document;
                var Screen = Doc.body;
                var Win = $(window);

                //是否是夜间模式
                var NightMode = false;

                //初始化的字体大小
                var InitFontSize;

                //dom节点的缓存
                var Dom = {
                    bottom_tool_bar: $('#bottom_tool_bar'),
                    nav_title: $('#nav_title'),
                    bk_container: $('#bk-container'),
                    night_button: $('#night-button'),
                    next_button: $('#next_button'),
                    prev_button: $('#prev_button'),
                    top_nav: $('#top-nav'),
                    bottom_nav: $('.bottom_nav')
                }

                // 程序初始化
                var readerUIFrame = RenderBaseFrame(RootContainer);

                //获得章节数据，展示
                var readerModel = ReaderModel(Fiction_id, Chapter_id, function (data) {
                    readerUIFrame(data);
                    Dom.bottom_tool_bar.show();
                    setTimeout(function () {
                        ScrollLock = false;
                        Screen.scrollTop = 0;
                    }, 20);
                });

                //阅读器数据内容展示
                readerModel.init();

                //从缓存中读取的信息进行展示
                var ModuleFontSwitch = (function () {
                    //字体和背景的颜色表
                    var colorArr = [{
                        value: '#f7eee5',
                        name: '米白',
                        font: ''
                    }, {
                        value: '#e9dfc7',
                        name: '纸张',
                        font: '',
                        id: "font_normal"
                    }, {
                        value: '#a4a4a4',
                        name: '浅灰',
                        font: ''
                    }, {
                        value: '#cdefce',
                        name: '护眼',
                        font: ''
                    }, {
                        value: '#283548',
                        name: '灰蓝',
                        font: '#7685a2',
                        bottomcolor: '#fff'
                    }, {
                        value: '#0f1410',
                        name: '夜间',
                        font: '#4e534f',
                        bottomcolor: 'rgba(255,255,255,0.7)',
                        id: "font_night"
                    }];

                    var tool_bar = Util.StorageGetter('toolbar_background_color');
                    var bottomcolor = Util.StorageGetter('bottom_color');
                    var color = Util.StorageGetter('background_color');
                    var font = Util.StorageGetter('font_color');
                    var bkCurColor = Util.StorageGetter('background_color');
                    var fontColor = Util.StorageGetter('font_color');

                    for (var i = 0; i < colorArr.length; i++) {
                        var display = 'none';
                        if (bkCurColor == colorArr[i].value) {
                            display = '';
                        }
                        Dom.bk_container.append('<div class="bk-container" id="' + colorArr[i].id + '" data-font="' + colorArr[i].font + '"  data-bottomcolor="' + colorArr[i].bottomcolor + '" data-color="' + colorArr[i].value + '" style="background-color:' + colorArr[i].value + '"><div class="bk-container-current" style="display:' + display + '"></div><span style="display:none">' + colorArr[i].name + '</span></div>');
                    }

                    RootContainer.css('min-height', $(window).height() - 100);

                    if (bottomcolor) {
                        $('#bottom_tool_bar_ul').find('li').css('color', bottomcolor);
                    }

                    if (color) {
                        $('body').css('background-color', color);
                    }

                    if (font) {
                        $('.m-read-content').css('color', font);
                    }

                    //夜间模式
                    if (fontColor == '#4e534f') {
                        NightMode = true;
                        $('#day_icon').show();
                        $('#night_icon').hide();
                        $('#bottom_tool_bar_ul').css('opacity', '0.6');
                    }

                    //字体设置信息
                    InitFontSize = Util.StorageGetter('font_size');
                    InitFontSize = parseInt(InitFontSize);
                    if (!InitFontSize) {
                        InitFontSize = 18;
                    }

                    RootContainer.css('font-size', InitFontSize);

                })();



                //页面中的零散交互事件处理
                var EventHandler = (function () {
                    //夜间和白天模式的转化
                    Dom.night_button.click(function () {
                        if (NightMode) {
                            $('#day_icon').hide();
                            $('#night_icon').show();
                            $('#font_normal').trigger('click');
                            NightMode = false;
                        } else {
                            $('#day_icon').show();
                            $('#night_icon').hide();
                            $('#font_night').trigger('click');
                            NightMode = true;
                        }

                    });

                    //字体和背景颜色的信息设置
                    Dom.bk_container.delegate('.bk-container', 'click', function () {
                        var color = $(this).data('color');
                        var font = $(this).data('font');
                        var bottomcolor = $(this).data('bottomcolor');
                        var tool_bar = font;
                        Dom.bk_container.find('.bk-container-current').hide();
                        $(this).find('.bk-container-current').show();
                        if (!font) {
                            font = '#000';
                        }
                        if (!tool_bar) {
                            tool_bar = '#fbfcfc';
                        }

                        if (bottomcolor && bottomcolor != "undefined") {
                            $('#bottom_tool_bar_ul').find('li').css('color', bottomcolor);
                        } else {
                            $('#bottom_tool_bar_ul').find('li').css('color', '#a9a9a9');
                        }
                        $('body').css('background-color', color);
                        $('.m-read-content').css('color', font);

                        Util.StorageSetter('toolbar_background_color', tool_bar);
                        Util.StorageSetter('bottom_color', bottomcolor);
                        Util.StorageSetter('background_color', color);
                        Util.StorageSetter('font_color', font);

                        var fontColor = Util.StorageGetter('font_color');
                        //夜间模式
                        if (fontColor == '#4e534f') {
                            NightMode = true;
                            $('#day_icon').show();
                            $('#night_icon').hide();
                            $('#bottom_tool_bar_ul').css('opacity', '0.6');
                        } else {
                            NightMode = false;
                            $('#day_icon').hide();
                            $('#night_icon').show();
                            $('#bottom_tool_bar_ul').css('opacity', '0.9');
                        }
                    });

                    //按钮的多态样式效果
                    $('.spe-button').on('touchstart', function () {
                        $(this).css('background', 'rgba(255,255,255,0.3)');
                    }).on('touchmove', function () {
                        $(this).css('background', 'none');
                    }).on('touchend', function () {
                        $(this).css('background', 'none');
                    });

                    //字体放大
                    $('#large-font').click(function () {
                        if (InitFontSize > 20) {
                            return;
                        }
                        InitFontSize += 1;
                        Util.StorageSetter('font_size', InitFontSize);
                        RootContainer.css('font-size', InitFontSize);
                    });

                    //字体缩小
                    $('#small-font').click(function () {
                        if (InitFontSize < 12) {
                            return;
                        }
                        InitFontSize -= 1;
                        Util.StorageSetter('font_size', InitFontSize);
                        RootContainer.css('font-size', InitFontSize);
                    });

                    var font_container = $('.font-container');
                    var font_button = $('#font-button');
                    var menu_container = $('#menu_container');

                    font_button.click(function () {
                        if (font_container.css('display') == 'none') {
                            font_container.show();
                            font_button.addClass('current');
                        } else {
                            font_container.hide();
                            font_button.removeClass('current');

                        }
                    });

                    RootContainer.click(function () {
                        font_container.hide();
                        font_button.removeClass('current');
                    });

                    //对屏幕的滚动监控
                    Win.scroll(function () {
                        Dom.top_nav.hide();
                        Dom.bottom_nav.hide();
                        font_container.hide();
                        font_button.removeClass('current');
                    });

                    //章节翻页
                    Dom.next_button.click(function () {
                        readerModel.next();
                    });

                    Dom.prev_button.click(function () {
                        readerModel.prev();
                    });

                    //返回书架
                    Dom.nav_title.click(function () {
                        location.href = '/read/';
                    });

                    $('.icon-back').click(function () {
                        location.href = '/read/';
                    });

                    //查看目录
                    $('#menu_button').click(function () {
                        location.href = '/read/catalog.html?book_id=' + Fiction_id;
                    });

                    //屏幕中央事件
                    $('#action_mid').click(function () {
                        if (Dom.top_nav.css('display') == 'none') {
                            Dom.bottom_nav.show();
                            Dom.top_nav.show();
                        } else {
                            Dom.bottom_nav.hide();
                            Dom.top_nav.hide();
                            font_container.hide();
                            font_button.removeClass('current');
                        }

                    });
                })();
            }

            return main();
        })();
    </script>
</body>

</html>